import React, { useEffect, useState } from 'react';
import { View, Text, StyleSheet, Pressable, TextInput } from 'react-native';
import Events from './event';
import { size } from '@/app/utils';

interface ModalOptions {
    text?: string;
    callback?: (result: { paypwd: string }) => void;
}
let ToastModal = () => {
    let [modalVisible, setModalVisible] = useState(false);
    let [modalOptions, setModalOptions] = useState<ModalOptions>({});
    let [payPwd, setPayPwd] = useState<string | null>(null);
    let [toastShow, setToastShow] = useState(false);
    let [toastMsg, setToastMsg] = useState('请输入支付密码');

    useEffect(() => {
        Events.addListener("modal", _modal)
    }, [])

    const _modal = (options: ModalOptions) => {
        setModalVisible(true);
        setModalOptions(options);
    }

    const _sure = () => {
        var pwd = /^[A-Za-z0-9]+$/;
        if (payPwd) {
            if (!pwd.test(payPwd)) {
                setToastShow(true);
                setToastMsg("支付密码格式异常！")
                return false
            } else {
                setModalVisible(false);
                setModalOptions({});
                setPayPwd(null);
                modalOptions.callback?.({ paypwd: payPwd });
            }
        } else {
            setToastShow(true);
        }
    }

    return (
        modalVisible ? <View style={styles.modalbox}>
            <View style={styles.content}>
                <Text style={styles.tips}>{modalOptions.text || ''}</Text>
                <View style={styles.formItem}>
                    <TextInput value={payPwd || ''} placeholderTextColor={'#999'} onChange={value => {
                        const newText = value.nativeEvent.text;
                        setPayPwd(newText);
                    }} placeholder="请输入支付密码" secureTextEntry={true} style={styles.formItemRightText} />
                </View>
                <View>
                    <Text style={{ color: 'red', marginLeft: size(15), marginBottom: size(10), fontSize: size(12), lineHeight: size(16) }}>{toastShow ? toastMsg : ''}</Text>
                </View>
                <View style={{ flexDirection: "row", marginLeft: size(15), marginRight: size(15), marginBottom: size(20) }}>
                    <Pressable onPress={() => {
                        setModalVisible(false);
                        setModalOptions({})
                    }} style={[styles.btns, { marginRight: size(15) }]}>
                        <Text style={styles.btnsText}>取消</Text>
                    </Pressable>
                    <Pressable onPress={() => {
                        _sure();
                    }} style={styles.btns}>
                        <Text style={styles.btnsText}>确定</Text>
                    </Pressable>
                </View>
            </View>
        </View> : null
    )
}

const styles = StyleSheet.create({
    modalbox: {
        position: "absolute",
        left: 0,
        top: 0,
        right: 0,
        bottom: 0,
        zIndex: 999,
        elevation: 999,
        backgroundColor: "rgba(0,0,0,0.05)",
        flexDirection: 'column',
        alignItems: 'center',
        justifyContent: 'center'
    },
    content: {
        width: size(300),
        paddingTop: size(10),
        borderRadius: size(4),
        backgroundColor: "#fff",
        fontSize: size(16)
    },
    tips: {
        fontSize: size(16),
        lineHeight: size(20),
        minHeight: size(60),
        borderBottomWidth: 1,
        borderBottomColor: "#eee",
        textAlign: "center",
        padding: size(10),
        color: "#333"
    },
    btns: {
        textAlign: "center",
        height: size(40),
        flex: 1,
        backgroundColor: '#78A4A1',
        borderRadius: size(8)
    },
    btnsText: {
        textAlign: "center",
        lineHeight: size(40),
        fontSize: size(16),
        color: "#fff"
    },
    formItem: {
        backgroundColor: '#eee',
        marginLeft: size(15),
        marginRight: size(15),
        paddingLeft: size(12),
        paddingRight: size(12),
        borderRadius: size(5),
        marginBottom: size(40)
    },
    formItemRightText: {
        width: '100%',
        height: size(50),
        color: '#333',
        padding: 0,
    }
})
export default ToastModal;